<template>
  <div class="mx-4 mt-2 px-4 bg-white rounded-xl">
    <van-empty v-if="cards.length === 0" :description="$t('binds.noBindings')" />
    <div v-else v-for="(card, index) in cards" :key="index" class="py-4 border-b border-gray-100 last:border-b-0">
      <div class="mb-2 flex items-center justify-between text-gray-900">
        <div class="text-sm">{{ $t("binds.iccid") }}: {{ card.iccid }}</div>
        <van-icon name="delete" size="18" class="cursor-pointer" @click="handleDeleteBinding(card)" />
      </div>
      <div class="flex justify-between items-center text-sm text-gray-900">
        <div>
          <div class="font-medium mb-1">{{ card.region }}</div>
          <div class="mb-1">{{ card.package }}</div>
          <div class="flex items-center">
            <span class="mr-2">
              {{ card.status === "activated" ? $t("binds.activated") : $t("binds.notActivated") }}
            </span>
            <span v-if="card.validPeriod" class="">{{ card.validPeriod }}</span>
          </div>
        </div>
        <div class="flex flex-col">
          <van-button type="primary" class="bg-orange-500 border-none w-18 h-6 rounded-md mb-2" @click="handleQuery(card)">
            {{ $t("binds.query") }}
          </van-button>
          <van-button
            v-if="type === 'sim'"
            type="primary"
            class="bg-orange-500 border-none w-18 h-6 rounded-md"
            @click="handleRecharge(card)">
            {{ $t("binds.recharge") }}
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Empty } from "vant"

export default {
  name: "BindingCard",
  components: {
    [Empty.name]: Empty,
  },
  props: {
    cards: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      required: true,
      validator: (value) => ["sim", "esim"].includes(value),
    },
  },
  methods: {
    handleQuery(card) {
      this.$emit("query", card)
    },
    handleRecharge(card) {
      this.$emit("recharge", card)
    },
    handleDeleteBinding(card) {
      this.$emit("delete", card)
    },
  },
}
</script>

<style scoped>
/deep/ .target-div {
  width: 100%;
}
@media (min-width: 768px) {
  .parent /deep/ .target-div {
    margin: 0 1rem;
    width: calc(100% - 2rem);
  }
}
</style>
